﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WaffleControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:WoffleConverters="using:WaffleControl.Converters" x:Name="UserControl"
    x:Class="WaffleControl.WaffleBar"
    mc:Ignorable="d"
    VerticalAlignment="Bottom"
    Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}" SizeChanged="SizeChangedEvent" Loaded="Loaded">
    <UserControl.Resources>
        <WoffleConverters:ValueMinusParameterGL x:Key="ValueMinusParameterGL"/>
        <WoffleConverters:ValuePercentage x:Key="ValuePercentage"/>
        <WoffleConverters:ValuePercentageTile x:Key="ValuePercentageT"/>
        <Style TargetType="Button" x:Key="WaffleButton">
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="MinHeight" Value="50"/>
            <Setter Property="MaxHeight" Value="50"/>
            <Setter Property="MinWidth" Value="50"/>
            <Setter Property="MaxWidth" Value="50"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid Width="50" Height="50" Background="{Binding WaffleButtonBackground,ElementName=UserControl}" x:Name="WaffleContainer">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonState">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation From="{Binding WaffleButtonBackground.Color,ElementName=UserControl}" To="Transparent" Duration="0:0:0.1" Storyboard.TargetName="WaffleContainer" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation From="{Binding WaffleButtonBackground.Color,ElementName=UserControl}" To="Gray" Duration="0:0:0.1" Storyboard.TargetName="WaffleContainer" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Path Width="25" Height="25" Stretch="Fill" Fill="{Binding WaffleButtonForeground, ElementName=UserControl}" Data="F1 M 33,33L 43,33L 43,43L 33,43L 33,33 Z M 33,20L 43,20L 43,30L 33,30L 33,20 Z M 20,20L 30,20L 30,30L 20,30L 20,20 Z M 20,33L 30,33L 30,43L 20,43L 20,33 Z M 46,33L 56,33L 56,43L 46,43L 46,33 Z M 46,20L 56,20L 56,30L 46,30L 46,20 Z M 20,46L 30,46L 30,56L 20,56L 20,46 Z M 33,46L 43,46L 43,56L 33,56L 33,46 Z M 46,46L 56,46L 56,56L 46,56L 46,46 Z "/>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Button" x:Key="ListOpenButton">
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="MinHeight" Value="50"/>
            <Setter Property="MaxHeight" Value="50"/>
            <Setter Property="MinWidth" Value="50"/>
            <Setter Property="MaxWidth" Value="50"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid Width="50" Height="50" Background="Transparent" x:Name="ListOpenContainer">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonState">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation From="#FF323232" To="#FF1186BD" Duration="0:0:0.2" Storyboard.TargetName="ListOpenContainer" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimation From="#FF1186BD" To="Gray" Duration="0:0:0.2" Storyboard.TargetName="ListOpenContainer" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Path Width="18" Height="18" Stretch="Fill" Fill="White" Data="M7.41,18.41L6,17L12,11L18,17L16.59,18.41L12,13.83L7.41,18.41M7.41,12.41L6,11L12,5L18,11L16.59,12.41L12,7.83L7.41,12.41Z"/>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="ListView" x:Key="WaffleListView">
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="IsItemClickEnabled" Value="True"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="SelectionMode" Value="None"/>
            <Setter Property="CanDragItems" Value="False"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid  VerticalAlignment="Center"  
                               HorizontalAlignment="Center" 
                               MaxHeight="50" 
                               MinWidth="80" 
                               x:Name="WaffleListItemBackground" 
                               Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation From="Transparent" To="White" Duration="0:0:0.2" Storyboard.TargetName="WaffleListItemBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverPressed">
                                        <Storyboard>
                                            <ColorAnimation From="Transparent" To="White" Duration="0:0:0.2" Storyboard.TargetName="WaffleListItemBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel Margin="10,5,10,0" VerticalAlignment="Center" HorizontalAlignment="Center"  >
                                <Path Stretch="Uniform" Fill="{Binding BottomListItemsForeground,ElementName=UserControl}" MaxHeight="20" Data="{Binding Path}"/>
                                <TextBlock FontSize="10" Text="{Binding Text}" Foreground="{Binding BottomListItemsForeground,ElementName=UserControl}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="GridView" x:Key="WaffleListViewContainer">
            <Setter Property="CanDragItems" Value="False"/>
            <Setter Property="IsItemClickEnabled" Value="True"/>
            <Setter Property="SelectionMode" Value="None"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid  Width="{Binding WaffleTileSize,  ElementName=UserControl}" 
                               Height="{Binding WaffleTileSize,  ElementName=UserControl}" 
                               x:Name="WaffleContentListItemBackground" 
                               MinWidth="150"
                               MinHeight="150"
                               Background="{Binding WaffleTileBackground,ElementName=UserControl}"
                               Margin="10,10,10,10"
                               HorizontalAlignment="Center">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation From="Transparent" To="White" Duration="0:0:0.2" Storyboard.TargetName="WaffleContentListItemBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverPressed">
                                        <Storyboard>
                                            <ColorAnimation From="Transparent" To="White" Duration="0:0:0.2" Storyboard.TargetName="WaffleContentListItemBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <StackPanel Margin="10"  HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Path Stretch="Uniform" Fill="{Binding WaffleTileForeground,ElementName=UserControl}" 
                                      Width="{Binding ActualWidth, ElementName=WaffleContentListItemBackground,Converter={StaticResource ValuePercentageT},ConverterParameter=50}"
                                      MinWidth="100"
                                      MinHeight="100"
                                      Height="{Binding ActualWidth, ElementName=WaffleContentListItemBackground,Converter={StaticResource ValuePercentageT},ConverterParameter=50}" 
                                      Data="{Binding Path}"/>
                                <TextBlock Foreground="{Binding WaffleTileForeground,ElementName=UserControl}" FontSize="15"  Text="{Binding Text}" TextAlignment="Center"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>
    <Grid x:Name="MainWaffleContent" VerticalAlignment="Top" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition x:Name="ContentRow" Height="0"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <Grid x:Name="WaffleContent" 
              Background="{Binding WaffleMenuContentBackground,ElementName=UserControl}" 
              Canvas.ZIndex="10" Margin="10" 
              Visibility="Collapsed" Opacity="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10"/>
            </Grid.RowDefinitions>
            <Grid.Resources>
                <Storyboard x:Key="WaffleContentIn">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="WaffleContent" Storyboard.TargetProperty="Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="WaffleContentOut">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="WaffleContent" Storyboard.TargetProperty="Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <Grid Margin="0,10,0,0">
                <GridView ItemsSource="{Binding WaffleTileListItems,ElementName=UserControl}" 
                          x:Name="WaffleContentGridView" 
                          Style="{StaticResource WaffleListViewContainer}" 
                          ItemClick="TopListClick"/>
            </Grid>
            <Grid Grid.Row="1">
                <Polygon Points="0,0 10,10, 20,0"  
                         Fill="{Binding Background,ElementName=WaffleContent}"
                         RenderTransformOrigin="0.5,0.5" >
                    <Polygon.RenderTransform>
                        <CompositeTransform TranslateY="10" TranslateX="5"/>
                    </Polygon.RenderTransform>
                </Polygon>
            </Grid>
        </Grid>
        <Grid x:Name="WaffleBarContainer" Grid.Row="1" Background="{Binding BarBackground, ElementName=UserControl}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Style="{StaticResource WaffleButton}" Click="Button_Click"/>
            <ScrollViewer Grid.Column="1" 
                          ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                          ScrollViewer.HorizontalScrollMode="Enabled" 
                          ScrollViewer.VerticalScrollMode="Disabled">
                <ListView x:Name="HorizontalListview" 
                          Style="{ThemeResource WaffleListView}"  
                          ItemsSource="{Binding BarListItems, ElementName=UserControl}"  
                          ItemClick="BottomListClick" 
                          />
            </ScrollViewer>
        </Grid>

    </Grid>
</UserControl>
